<template>
  <div>

    <p :style="[titleColor, {fontSize: '33px'}]">标题</p>
    <input type='text' v-model="title">
    <p :style="[titleColor, fs]">内容</p>
    <input type="text" v-model="content">
    <br>
    <button @click="add">添加</button>
    <br>
    <p :class="[class1, {testClass2: isClass2}]">testClass</p>
  </div>
</template>

<script>
import store from '@/store'

export default {
  name: 'Add',
  store,
  data () {
    return {
      title: '',
      content: '',
      fs: {
        fontSize: '23px'
      },
      titleColor: {
        color: 'red'
      },
      class1: 'testClass1',
      class2: 'testClass2',
      isClass2: true
    }
  },
  methods: {
    add () {
      store.commit('addItem', {
        title: this.title,
        content: this.content
      })
    }
  }
}
</script>

<style>
.testClass1 {
  font-size: 23px;
}

.testClass2 {
  color: red
}
</style>
